<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<% request.setCharacterEncoding("utf-8"); %>
<% response.setContentType("text/html; charset=utf-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
	<script type="text/javascript" language="javascript" src="/WebGLControl/js/gl-matrix-min.js"></script>
	<title>WebGL Learning</title>
</head>
	
<body onload="javascript:webGLStart();">
	<script id="shader-fs" type="x-shader/x-fragment">
		precision mediump float;

		void main(void) {
			gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
		}
	</script>

	<script id="shader-vs" type="x-shader/x-vertex">
		attribute vec3 aVertexPosition;
		
		uniform mat4 uMVMatrix;
		uniform mat4 uPMatrix;
		
		void main(void) {
			gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
		}
	</script>

	<script type="text/javascript">
		var gl;

		var shaderProgram;

		var triangleVertexPositionBuffer;
		var squareVertexPositionBuffer;

		var mvMatrix = mat4.create();
		var pMatrix = mat4.create();

		function webGLStart() {
			var canvas = document.getElementById("view01");
			initGL(canvas);
			initShaders();
			initBuffers();

			gl.clearColor(0.0, 0.0, 0.0, 1.0);
			gl.enable(gl.DEPTH_TEST);

			drawScene();
		}

		function initGL(canvas) {
			try {
				gl = canvas.getContext("experimental-webgl");
				gl.viewportWidth = canvas.width;
				gl.viewportHeight = canvas.height;
			} catch (e) {
			}
			if (!gl) {
				alert("Could not initialise WebGL, sorry :-(");
			}
		}

		function getShader(gl, id) {
			var shaderScript = document.getElementById(id);
			if (!shaderScript) {
				return null;
			}

			var str = "";
			var k = shaderScript.firstChild;
			while (k) {
				if (k.nodeType == 3) {
					str += k.textContent;
				}
				k = k.nextSibling;
			}

			var shader;
			if (shaderScript.type == "x-shader/x-fragment") {
				shader = gl.createShader(gl.FRAGMENT_SHADER);
			} else if (shaderScript.type == "x-shader/x-vertex") {
				shader = gl.createShader(gl.VERTEX_SHADER);
			} else {
				return null;
			}

			gl.shaderSource(shader, str);
			gl.compileShader(shader);

			if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
				alert(gl.getShaderInfoLog(shader));
				return null;
			}

			return shader;
		}

		function initShaders() {
			var fragmentShader = getShader(gl, "shader-fs");
			var vertexShader = getShader(gl, "shader-vs");

			shaderProgram = gl.createProgram();
			gl.attachShader(shaderProgram, vertexShader);
			gl.attachShader(shaderProgram, fragmentShader);
			gl.linkProgram(shaderProgram);

			if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
				alert("Could not initialise shaders");
			}

			gl.useProgram(shaderProgram);

			shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
			gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

			shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
			shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
		}

		function setMatrixUniforms() {
			gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
			gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
		}

		function initBuffers() {
			triangleVertexPositionBuffer = gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
			var vertices = [
				0.0,		1.0,		0.0,
				-1.0,		-1.0,		0.0,
				1.0,		-1.0,		0.0
			];
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
			triangleVertexPositionBuffer.itemSize = 3;
			triangleVertexPositionBuffer.numItems = 3;

			squareVertexPositionBuffer = gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
			vertices = [
				1.0,		1.0,		0.0,
				-1.0,		1.0,		0.0,
				1.0,		-1.0,		0.0,
				-1.0,		-1.0,		0.0
			];
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
			squareVertexPositionBuffer.itemSize = 3;
			squareVertexPositionBuffer.numItems = 4;
		}

		function drawScene() {
			gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

			mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
			mat4.identity(mvMatrix);
			mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);

			gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
			gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
			setMatrixUniforms();

			gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

			mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);

			gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
			gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
			setMatrixUniforms();

			gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
		}
	</script>
		
	<h3>WebGL Lesson01</h3>
	<h4>Lesson Number<s:property value="lesson" /></h4>
	
	<canvas id="view01" style="border: none;" width="640" height="480" />
</body>
</html>